<!-- 查找教练页面 lzq -->

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>找教练</title>

	<style type="text/css">
		body, html {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
		#allmap{width:100%;height:500px;}
		p{margin-left:5px; font-size:14px;}
	</style>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=U2gTiOVvkVbz66WyFV0G1sTz3jvZrdeE"></script>
	<script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
	
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
			<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
			<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
		<link rel="stylesheet" type="text/css" href="css/normalize.css" />
	<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
	<link href='https://fonts.googleapis.com/css?family=Lato:400,300,700,900' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" type="text/css" href="css/style4.css">
	
<!-- layui框架 -->
<link rel="stylesheet" href="css/layui.css" media="all">
 <link rel="stylesheet" href="css/layui.mobile.css" media="all">

<link id="layuicss-layer" rel="stylesheet" href="css/modules/layer/default/layer.css" media="all">
<link id="layuicss-skincodecss" rel="stylesheet" href="css/modules/code.css" media="all">

<!--   <link rel="stylesheet" href="css/mall.css" type="text/css" />  -->
  
 <style type="text/css">
#child_header { background-color: #0c9; border-bottom: #e0bc00 2px solid; height: 32px; padding: 8px 4%; width: 92% }
#child_header .goback { float: left; width: 38% }
#child_header .goback i { height: 32px; width: 24px; float: left; background: url(images/index_icon/little_icon.png) no-repeat center; background-position: -18px 11px }
#child_header .current_location span, #child_header .next_operate span { color: #000000; text-decoration: none; font-size: 16px; line-height: 36px; float: left }
#child_header .current_location { }
#child_header .current_location a { display: block }
#child_header .current_location span { font-size: 18px; }
#child_header .next_operate { float: right }

body {
	background-color: #31dd790f
}
.row{
    border: #312d2370 10px solid
}
.layui-input,.layui-textarea{
background-color:#31dd790d
}
.container{
padding-right:0px;
padding-left:0px
}
</style> 

<script type="text/javascript" src="layui.js"></script>

<script type="text/javascript">

	
	function showcoachInprice(){
		$.ajax({
			url:"/chat/showcoachInprice",
			type:"get",
			async : false,
			success:function(dto){
				var users = dto.users;
				var coaches = dto.coaches;
				var data_info = new Array();
				var opts = {
						width : 313,     // 信息窗口宽度
						height: 437,     // 信息窗口高度
						enableAutoPan : true, 
						enableMessage:true//设置允许信息窗发送短息
					   };
				map = new BMap.Map("allmap");
				map.centerAndZoom(new BMap.Point(104.076763,30.562707), 15);
				
				var abc="";
				
	 			for(var i=0;i<users.length;i++){
	 				var user = users[i];
	 				var coach = coaches[i];
	 				var x = parseFloat(user.distance);
	 				distance = Math.round(x/1000*10)/10
	 				
	 				
	 				abc +='<div class="row clearfix" ><div class="col-xs-6 column" style="width: 30%;"><input type="hidden" id="user'+user.user_id+'"/>'
	 					+'<a href="/chat/showInfo?user_id='+user.user_id+'" ><img alt="140x140" src="'+user.user_headimg+'" class="img-circle" style="width: 170px;height: 170px;"/></a></div>'
					 	+'<div class="col-xs-6 column" style="margin-left: 40px;"><a href="#" onclick="openInfoWindow('+user.user_id+')"><dl class="dl-horizontal" style="font-size:	x-large">'
					 	+'<dt>'+user.user_name+'</dt>'
					 	+'<dd>位置：'+user.adress+'</dd>'
					 	+'<dt>距离:</dt>'
					 	+'<dd>'+distance+'千米</dd>'
					 	+'</dl></a></div></div>';
					 	
					 	
					 data_info[i] = new Array();
					 for(var k=0;k<3;k++){
						 data_info[i][0] =user.longitude ; 
						 data_info[i][1] = user.latitude;
						 data_info[i][2] = '<div class="single-member effect-1" style="margin-top:80px">'
				            	+'<div class="member-image">'
			                	+'<a href="/chat/showInfo?user_id='+user.user_id+'"><img src="'+user.user_headimg+'" alt="Member" class="headimg"></a>'
				                +'</div>'
				                +'<div class="member-info">'
			                	+'<h3>'+user.user_name+'</h3>'
			                    +' <h5>教练</h5>'
			                    +' <p>位置：'+user.adress+'</p><p>距离:'+distance+'千米</p><p>时费：'+coach.coach_price+'</p>'
			                    +' <div class="social-touch">'
		                    	+'<a class="fb-touch" href="#"></a>'
		                        +' <a class="tweet-touch" href="#"></a>'
		                        +' <a class="linkedin-touch" href="#"></a></div></div> </div>';
					 }
				}
	 				$("#info").html(abc);
	 				
	 				for(var i=0;i<users.length;i++){
	 					var user = users[i];
	 					var str = "";
	 					str += data_info[i][0]+";"+data_info[i][1]+";"+data_info[i][2]
	 					 $("#user"+user.user_id).val(str);
	 				}
	 				
	 			for(var j=0;j<data_info.length;j++){
	 				var marker = new BMap.Marker(new BMap.Point(data_info[j][0],data_info[j][1]));  // 创建标注
	 				var content = data_info[j][2];
	 				map.addOverlay(marker);               // 将标注添加到地图中
	 				addClickHandler(content,marker);
	 			}
	 			
			
				function addClickHandler(content,marker){
					marker.addEventListener("click",function(e){
						openInfo(content,e)}
					);
				}
				
				function openInfo(content,e){
					var p = e.target;
					var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
					var infoWindow = new BMap.InfoWindow(content,opts);  // 创建信息窗口对象 
					map.openInfoWindow(infoWindow,point); //开启信息窗口
				}
			}
		});
	};
	function showcoachIndistance(){
		window.map = new BMap.Map("allmap");
		$.ajax({
			url:"/chat/showcoachIndistance",
			type:"get",
			async : false,
			success:function(dto){
				var users = dto.users;
				var coaches = dto.coaches;
				var data_info = new Array();
				var opts = {
						width : 313,     // 信息窗口宽度
						height: 437,     // 信息窗口高度
						enableAutoPan : true, 
						enableMessage:true//设置允许信息窗发送短息
					   };
				map=window.map;
				map.centerAndZoom(new BMap.Point(104.076763,30.562707), 15);
				map.enableScrollWheelZoom();
				var abc="";
				
				
	 			for(var i=0;i<users.length;i++){
	 				var user = users[i];
	 				var coach = coaches[i];
	 				var x = parseFloat(user.distance);
	 				distance = Math.round(x/1000*10)/10
	 				
	 				
	 				abc +='<div class="row clearfix"><div class="col-xs-6 column" style="width: 30%;"><input type="hidden" id="user'+user.user_id+'"/>'
	 					+'<a href="/chat/showInfo?user_id='+user.user_id+'" ><img alt="140x140" src="'+user.user_headimg+'" class="img-circle" style="width: 170px;height: 170px;"/></a></div>'
					 	+'<div class="col-xs-6 column" style="margin-left: 40px;"><a href="#" onclick="openInfoWindow('+user.user_id+')"><dl class="dl-horizontal" style="font-size:	x-large">'
					 	+'<dt>'+user.user_name+'</dt>'
					 	+'<dd>位置：'+user.adress+'</dd>'
					 	+'<dt>距离:</dt>'
					 	+'<dd>'+distance+'千米</dd>'
					 	+'</dl></div></a></div>';
					
					
					 	
					 data_info[i] = new Array();
					 for(var k=0;k<3;k++){
						 data_info[i][0] =user.longitude ; 
						 data_info[i][1] = user.latitude;
						 data_info[i][2] ='<div class="single-member effect-1" style="margin-top:80px">'
				            	+'<div class="member-image">'
			                	+'<a href="/chat/showInfo?user_id='+user.user_id+'"><img src="'+user.user_headimg+'" alt="Member" class="headimg"></a>'
				                +'</div>'
				                +'<div class="member-info">'
			                	+'<h3>'+user.user_name+'</h3>'
			                    +' <h5>教练</h5>'
			                    +' <p>位置：'+user.adress+'</p><p>距离:'+distance+'千米</p><p>时费：'+coach.coach_price+'</p>'
			                    +' <div class="social-touch">'
		                    	+'<a class="fb-touch" href="#"></a>'
		                        +' <a class="tweet-touch" href="#"></a>'
		                        +' <a class="linkedin-touch" href="#"></a></div></div> </div>' ; 
					 }
					
				}
	 				$("#info").html(abc);
	 			
	 				for(var i=0;i<users.length;i++){
	 					var user = users[i];
	 					var str = "";
	 					str += data_info[i][0]+";"+data_info[i][1]+";"+data_info[i][2]
	 					 $("#user"+user.user_id).val(str);
	 				}
	 				
	 				
	 			for(var j=0;j<data_info.length;j++){
	 				var marker = new BMap.Marker(new BMap.Point(data_info[j][0],data_info[j][1]));  // 创建标注
	 				var content = data_info[j][2];
	 				map.addOverlay(marker);               // 将标注添加到地图中
	 				addClickHandler(content,marker);
	 			}
	 			
			
				function addClickHandler(content,marker){
					marker.addEventListener("click",function(e){
						openInfo(content,e)}
					);
				}
				function openInfo(content,e){
					var p = e.target;
					var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
					var infoWindow = new BMap.InfoWindow(content,opts);  // 创建信息窗口对象 
					map.openInfoWindow(infoWindow,point); //开启信息窗口
				}
				
			}
		
		});
		return window.map;
		};
		
		
	
</script>


<script type="text/javascript">
$(document).ready(function(){
	showcoachIndistance();
	})

</script>

	<style type="text/css">
	body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
	#allmap {height: 500px;width:100%;overflow: hidden;}
	</style>
	<link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />
</head>
<body >


<div class="container">
            <div id="child_header" style="height: 40px;padding-top: 4px;width: 100%">
                <div class="goback"><a href="http://localhost:9999/chat/main"><i></i></a></div>
                <div class="current_location"><span>教练展示</span></div>
            </div>
<div id="allmap"></div>
<script type="text/javascript"></script>

<script type="text/javascript">
	// 百度地图API功能
    map=showcoachIndistance();

  	function openInfoWindow(id) {
 	   //样式2
 	     var str =  $("#user"+id).val();
 	   var list = str.split(";")
  		var infoWindow = new BMap.InfoWindow(list[2],{
			width : 313,     // 信息窗口宽度
			height: 437,     // 信息窗口高度
			enableAutoPan : true, 
			enableMessage:true//设置允许信息窗发送短息
		   });  // 创建信息窗口对象 
 		  map.openInfoWindow(infoWindow,new BMap.Point(list[0],list[1])); //开启信息窗口   
 	} 

  	
</script>
<br>
		
<hr>
<br>
	<script>
layui.use(['layer','jquery','form'], function(){
	var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句
	  form = layui.form;
	  	form.on('select(demo)', function(data){
	  				var value = $('#select option:selected').val()
  					if(value==0){
  						showcoachIndistance();
  					}else if(value==1){
  						showcoachInprice();
  					}
					/* alert($('#select option:selected').html());
					form.render('select'); */
				});
	});
  </script>
	<form class="layui-form" action="" lay-filter="example">
<div class="layui-form-item" >
    <label class="layui-form-label">筛选 ：</label>
    <div class="layui-input-block" style="width: 150px">
      <select name="interest" lay-filter="demo" id="select">
        <option value=""></option>
        <option value="0" selected="selected">距离</option>
        <option value="1">价格</option>
        <option value="2">评分</option>
      </select><div class="layui-unselect layui-form-select"><div class="layui-select-title"><input type="text" placeholder="请选择" value="" readonly="" class="layui-input layui-unselect"><i class="layui-edge"></i></div><dl class="layui-anim layui-anim-upbit"><dd lay-value="" class="layui-select-tips">请选择</dd><dd lay-value="0" class="">写作</dd><dd lay-value="1" class="">阅读</dd><dd lay-value="2" class="">游戏</dd><dd lay-value="3" class="">音乐</dd><dd lay-value="4" class="">旅行</dd></dl></div>
    </div>
  </div>
  
  </form>
</div>



<br>
<br>
<div class="container" id="info" style="margin-top: -40px;">

</div>


</body>
</html>